<template>
  <div class="fingering-follow-container">
    <home-header />
    <div class="fingering-content">
      <h1>指法跟弹</h1>
      <p>在这里可以跟随系统进行指法练习和弹奏。</p>
      <div class="keyboard-box">
        <div class="piano-bottom">
          <div class="piano">
            <div v-for="(key, index) in pianoKeys" :key="index" 
                 :id="key"
                 :data-id="key"
                 class="piano-key"
                 :class="{ 'black': key.includes('#') || key.includes('b') }"
                 @click="handlePianoKeyClick(index)">
              <span v-if="noteNames[index]" :class="noteNames[index].pitch">
                {{ noteNames[index].name }}
              </span>
            </div>
          </div>
          <ul class="piano-group">
            <li v-for="(width, index) in groupWidths" 
                :key="index" 
                class="group"
                :style="{ width: width }">
              {{ index + 1 }}组
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HomeHeader from '../components/HomeHeader.vue'

export default {
  name: 'FingeringFollowView',
  components: { HomeHeader },
  data() {
    return {
      pianoKeys: [
        'A0', 'A#0/Bb0', 'B0',
        'C1', 'C#1/Db1', 'D1', 'D#1/Eb1', 'E1', 'F1', 'F#1/Gb1', 'G1', 'G#1/Ab1',
        'A1', 'A#1/Bb1', 'B1',
        'C2', 'C#2/Db2', 'D2', 'D#2/Eb2', 'E2', 'F2', 'F#2/Gb2', 'G2', 'G#2/Ab2',
        'A2', 'A#2/Bb2', 'B2',
        'C3', 'C#3/Db3', 'D3', 'D#3/Eb3', 'E3', 'F3', 'F#3/Gb3', 'G3', 'G#3/Ab3',
        'A3', 'A#3/Bb3', 'B3',
        'C4', 'C#4/Db4', 'D4', 'D#4/Eb4', 'E4', 'F4', 'F#4/Gb4', 'G4', 'G#4/Ab4',
        'A4', 'A#4/Bb4', 'B4',
        'C5', 'C#5/Db5', 'D5', 'D#5/Eb5', 'E5', 'F5', 'F#5/Gb5', 'G5', 'G#5/Ab5',
        'A5', 'A#5/Bb5', 'B5',
        'C6', 'C#6/Db6', 'D6', 'D#6/Eb6', 'E6', 'F6', 'F#6/Gb6', 'G6', 'G#6/Ab6',
        'A6', 'A#6/Bb6', 'B6',
        'C7', 'C#7/Db7', 'D7', 'D#7/Eb7', 'E7', 'F7', 'F#7/Gb7', 'G7', 'G#7/Ab7',
        'A7', 'A#7/Bb7', 'B7',
        'C8'
      ],
      noteNames: [
        { name: '6', pitch: 'QLP' }, { name: '升6降7', pitch: 'QLP' }, { name: '7', pitch: 'QLP' },
        { name: '1', pitch: 'QLP' }, { name: '升1降2', pitch: 'QLP' }, { name: '2', pitch: 'QLP' }, { name: '升2降3', pitch: 'QLP' }, { name: '3', pitch: 'QLP' }, { name: '4', pitch: 'QLP' }, { name: '升4降5', pitch: 'QLP' }, { name: '5', pitch: 'QLP' }, { name: '升5降6', pitch: 'QLP' },
        { name: '6', pitch: 'QLP' }, { name: '升6降7', pitch: 'QLP' }, { name: '7', pitch: 'QLP' },
        { name: '1', pitch: 'QLP' }, { name: '升1降2', pitch: 'QLP' }, { name: '2', pitch: 'QLP' }, { name: '升2降3', pitch: 'QLP' }, { name: '3', pitch: 'QLP' }, { name: '4', pitch: 'QLP' }, { name: '升4降5', pitch: 'QLP' }, { name: '5', pitch: 'QLP' }, { name: '升5降6', pitch: 'QLP' },
        { name: '6', pitch: 'QLP' }, { name: '升6降7', pitch: 'QLP' }, { name: '7', pitch: 'QLP' },
        { name: '1', pitch: 'QLP' }, { name: '升1降2', pitch: 'QLP' }, { name: '2', pitch: 'QLP' }, { name: '升2降3', pitch: 'QLP' }, { name: '3', pitch: 'QLP' }, { name: '4', pitch: 'QLP' }, { name: '升4降5', pitch: 'QLP' }, { name: '5', pitch: 'QLP' }, { name: '升5降6', pitch: 'QLP' },
        { name: '6', pitch: 'QLP' }, { name: '升6降7', pitch: 'QLP' }, { name: '7', pitch: 'QLP' },
        { name: '1', pitch: 'QLP' }, { name: '升1降2', pitch: 'QLP' }, { name: '2', pitch: 'QLP' }, { name: '升2降3', pitch: 'QLP' }, { name: '3', pitch: 'QLP' }, { name: '4', pitch: 'QLP' }, { name: '升4降5', pitch: 'QLP' }, { name: '5', pitch: 'QLP' }, { name: '升5降6', pitch: 'QLP' },
        { name: '6', pitch: 'QLP' }, { name: '升6降7', pitch: 'QLP' }, { name: '7', pitch: 'QLP' },
        { name: '1', pitch: 'QLP' }, { name: '升1降2', pitch: 'QLP' }, { name: '2', pitch: 'QLP' }, { name: '升2降3', pitch: 'QLP' }, { name: '3', pitch: 'QLP' }, { name: '4', pitch: 'QLP' }, { name: '升4降5', pitch: 'QLP' }, { name: '5', pitch: 'QLP' }, { name: '升5降6', pitch: 'QLP' },
        { name: '6', pitch: 'QLP' }, { name: '升6降7', pitch: 'QLP' }, { name: '7', pitch: 'QLP' },
        { name: '1', pitch: 'QLP' }, { name: '升1降2', pitch: 'QLP' }, { name: '2', pitch: 'QLP' }, { name: '升2降3', pitch: 'QLP' }, { name: '3', pitch: 'QLP' }, { name: '4', pitch: 'QLP' }, { name: '升4降5', pitch: 'QLP' }, { name: '5', pitch: 'QLP' }, { name: '升5降6', pitch: 'QLP' },
        { name: '6', pitch: 'QLP' }, { name: '升6降7', pitch: 'QLP' }, { name: '7', pitch: 'QLP' },
        { name: '1', pitch: 'QLP' }
      ],
      keysInGroup: [3, 12, 12, 12, 12, 12, 12, 12, 1],
      groupWidths: ['3.75%', '13.35%', '13.35%', '13.35%', '13.35%', '13.35%', '13.35%', '13.35%', '1.95%'],
      showNoteNames: true
    }
  },
  methods: {
    handlePianoKeyClick(index) {
      const id = this.pianoKeys[index];
      const audio = new Audio();
      let noteName;
      if (id.includes('/')) {
        noteName = id.split('/')[1];
      } else {
        noteName = id;
      }
      audio.src = `/audio/salamander/${noteName}.mp3`;
      audio.onerror = (e) => {
        console.error('Error loading audio:', e);
        this.$message.error('音频加载失败');
      };
      audio.currentTime = 0;
      audio.play().catch(error => {
        console.error('Error playing audio:', error);
        this.$message.error('音频播放失败');
      });
    },
    getNoteLabel(idx) {
      let label = (this.noteNames[idx] && this.noteNames[idx].name) ? this.noteNames[idx].name : this.pianoKeys[idx];
      const pitch = this.noteNames[idx] ? this.noteNames[idx].pitch : '';
      let dots = '';
      let html = '';
      if (pitch === 'HP') dots = '·';
      if (pitch === 'DHP') dots = '··';
      if (pitch === 'THP') dots = '···';
      if (pitch === 'QHP') dots = '····';
      if (pitch === 'LP') dots = '.';
      if (pitch === 'DLP') dots = '..';
      if (pitch === 'TLP') dots = '...';
      if (pitch === 'QLP') dots = '....';
      if (pitch === 'HP' || pitch === 'DHP' || pitch === 'THP' || pitch === 'QHP') {
        html = `<span class="upper-dot">${dots}</span>${label}`;
      } else if (pitch === 'LP' || pitch === 'DLP' || pitch === 'TLP' || pitch === 'QLP') {
        html = `${label}<span class="lower-dot">${dots}</span>`;
      } else {
        html = label;
      }
      return html;
    }
  }
}
</script>

<style scoped>
.fingering-follow-container {
  width: 100%;
  margin: 120px auto 0 auto;
  padding-top: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  text-align: center;
}
.fingering-content {
  margin-top: 0;
  padding: 0 20px;
}
.keyboard-box {
  margin-top: 20px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  overflow: hidden;
}
.piano-bottom {
  height: 175px;
  background: #000;
  width: 100%;
}
.piano {
  display: flex;
  justify-content: space-between;
  background: #fff;
  width: 100%;
  border: 1px solid #000;
  border-top-width: 3px;
  box-sizing: border-box;
  height: 156px;
}
.piano-key {
  width: 2%;
  height: 152px;
  outline: 1px solid #444444;
  background-color: white;
  box-sizing: border-box;
  line-height: 240px;
  text-align: center;
  position: relative;
  border-radius: 0 0 2px 2px;
  border-bottom: 5px solid #eeeeee;
  cursor: pointer;
  -webkit-user-select: none;
}
.piano-key.black {
  border: none;
  color: #ccc;
  font-size: 12px !important;
  height: 90px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 5px;
  width: 0.9%;
  height: 100px;
  margin: 0 -10px;
  background-color: #444444;
  z-index: 2;
  line-height: normal;
  color: #fff;
  writing-mode: inherit;
}
.piano-key:active {
  background: #000;
  color: #fff !important;
  border-bottom: 5px solid #000;
}
.piano-key.black:active {
  border-bottom: none;
}
.piano-key.active,
.piano-key.active span:after {
  background: red;
  color: #fff !important;
  border-bottom: 5px solid red;
}
.piano-key:active span::after {
  color: #fff !important;
}
.piano-key span::after {
  position: absolute;
  bottom: 36px;
  left: 50%;
  margin-left: -5px;
  display: inline-block;
  width: 10px;
  font-size: 12px;
  line-height: 0;
  text-align: center;
  color: #000;
  writing-mode: tb;
  box-sizing: border-box;
}
.piano-key .LP::after {
  height: 4px;
  content: '.';
}
.piano-key .DLP::after {
  height: 6px;
  content: '..';
}
.piano-key .TLP::after {
  height: 8px;
  content: '...';
}
.piano-key .QLP::after {
  height: 10px;
  content: '....';
}
.piano-key .HP::after {
  height: 4px;
  bottom: 13px;
  content: '.';
}
.piano-key .DHP::after {
  bottom: 10px;
  height: 6px;
  content: '..';
}
.piano-key .THP::after {
  bottom: 8px;
  height: 8px;
  content: '...';
}
.piano-key .QHP::after {
  bottom: 8px;
  height: 8px;
  content: '....';
}
.piano-group {
  overflow: hidden;
  border: 1px solid #000;
  border-width: 0 0.1% 0 0.1%;
}
.piano-group li {
  float: left;
  width: auto;
  background: #ccc;
  font-size: 12px;
  color: #333;
}
.group {
  list-style: none;
  text-align: center;
  margin-top: 3px;
  margin-right: 0.1%;
  box-sizing: border-box;
  white-space: nowrap;
}
.group:last-child {
  margin-right: 0;
}
</style> 